<template>
    <div>
      <!-- 首页轮播图的结构 -->
      <Carousel />
      <!-- 首页搜索医院的表单区域 -->
      <Search />
      <!-- 底部展示医院的结构 -->
      <el-row gutter="20">
        <el-col :span="20">
          <!-- 等级子组件 -->
          <Level @getLevel="getLevel" />
          <!--地区 -->
          <Region @getRegion="getRegion" />
          <!-- 展示医院的结构 -->
          <div class="hospital" v-if="hasHospitalArr.length > 0">
            <Card
              class="item"
              v-for="(item, index) in hasHospitalArr"
              :key="index"
              :hospitalInfo="item"
            />
          </div>
          <el-empty v-else description="暂无数据" />
          <!-- 分页器 -->
  
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="prev, pager, next, jumper,->,sizes,total"
            :total="total"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </el-col>
        <el-col :span="4">
           <Tip />
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref } from "vue";
  import { reqHospital } from "../../api/home";
  import Carousel from "./carousel/index.vue";
  import Search from "./search/index.vue";
  import Level from "./level/index.vue";
  import Region from "./region/index.vue";
  import Card from "./card/index.vue";
  import Tip from './tip/index.vue';
  import type { Content, HospitalResponseData } from "../../api/home/type";
  let pageNo = ref<number>(1);
  let pageSize = ref<number>(10);
  let hasHospitalArr = ref<Content>([]);
  let total = ref<number>(0);
  let hostype = ref<string>("");
  let districtCode = ref<string>("");
  
  onMounted(() => {
    getHospitalInfo();
  });
  
  //获取已有的医院的数据
  const getHospitalInfo = async () => {
    let result: HospitalResponseData = await reqHospital(
      pageNo.value,
      pageSize.value,
      hostype.value,
      districtCode.value
    );
    if (result.code == 200) {
      hasHospitalArr.value = result.data.content;
      total.value = result.data.totalElements;
    }
  };
  
  //分页器页码发生变化时候回调
  const currentChange = () => {
    getHospitalInfo();
  };
  //分页器下拉菜单发生变化的时候会触发
  const sizeChange = () => {
    pageNo.value = 1;
    getHospitalInfo();
  };
  
  //子组件自定义事件:获取儿子给父组件传递过来的等级参数
  const getLevel = (level: string) => {
    hostype.value = level;
    getHospitalInfo();
  };
  //子组件自定义事件：获取子组件传递过来的地区参数
  const getRegion = (region: string) => {
    districtCode.value = region;
    getHospitalInfo();
  };
  </script>
  
  <style scoped lang="scss">
  .hospital {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 48%;
      margin: 10px 0px;
    }
  }
  </style>
  